<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>生日惊喜！</title>
  <style>
    body {
      background: #ff99cc;
      font-family: 'Comic Sans MS', cursive;
      text-align: center;
      overflow: hidden;
      margin: 0;
      min-height: 100vh;
    }
    #birthday-box {
      margin: 100px auto;
      padding: 30px;
      background: white;
      border-radius: 20px;
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
      max-width: 600px;
      position: relative;
      z-index: 1;
    }
    .heart {
      position: absolute;
      color: #ff3366;
      font-size: 20px;
      animation: fall 3s linear infinite;
      pointer-events: none;
    }
    @keyframes fall {
      0% { top: -10%; transform: rotate(0deg); }
      100% { top: 110%; transform: rotate(360deg); }
    }
    #cake {
      cursor: pointer;
      transition: transform 0.3s;
      margin: 20px 0;
    }
    #cake:hover {
      transform: scale(1.1);
    }
  </style>
</head>
<body>
<div id="birthday-box">
  <h1 id="greeting-title">🎉 生日快乐！ 景甘蔗！！！！！🎉</h1>
  <img id="cake" src="https://img.icons8.com/color/96/000000/birthday-cake.png"
       alt="生日蛋糕" onclick="blowCandle()">
  <p id="message">点击蛋糕吹蜡烛吧！😊 </p>
  <div id="greeting-text"></div>
</div>

<script>
  // 初始化页面
  function initPage() {
    // 从URL获取名字参数
    const urlParams = new URLSearchParams(window.location.search);
    const name = urlParams.get('name') || "景甘蔗！！！！！";

    updateGreeting(name);
    createHearts();
  }

  // 更新祝福语
  function updateGreeting(name) {
    document.getElementById('greeting-title').innerHTML =
            `🎉 生日快乐，${escapeHtml(name)}！ 🎉`;
  }

  // 安全转义HTML
  function escapeHtml(unsafe) {
    return unsafe
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
  }

  // 飘落爱心效果
  function createHearts() {
    setInterval(() => {
      const heart = document.createElement('div');
      heart.className = 'heart';
      heart.textContent = '❤';
      heart.style.left = Math.random() * 100 + '%';
      heart.style.animationDuration = Math.random() * 3 + 2 + 's';
      document.body.appendChild(heart);
      setTimeout(() => heart.remove(), 5000);
    }, 300);
  }

  // 吹蜡烛交互
  function blowCandle() {
    document.getElementById('cake').src =
            'https://img.icons8.com/color/96/000000/birthday-cake-without-candles.png';
    document.getElementById('message').innerHTML = "🎂 蜡烛已吹灭！愿望会实现！ 🎂";

    document.getElementById('greeting-text').innerHTML = `
                <h2>祝你：</h2>
                <p>💖 这一年能够诸事顺遂，得偿所愿</p>
                <p>🌟 梦想成真，前程似锦</p>
                <p>🍀 好运连连，惊喜不断</p>
                <p>${new Date().getFullYear()} 爱你所爱，行你所行！</p>
            `;

    // 背景动画
    document.body.style.background = 'linear-gradient(45deg, #ff99cc, #ff6666)';
    startConfetti();
  }

  // 彩纸特效
  function startConfetti() {
    const count = 200;
    const defaults = {
      origin: { y: 0.7 },
      particleCount: 100,
      spread: 70
    };

    function fire(particleRatio, opts) {
      confetti(Object.assign({}, defaults, opts, {
        particleCount: Math.floor(count * particleRatio)
      }));
    }

    fire(0.25, { spread: 26 });
    fire(0.2, { spread: 60 });
    fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
    fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
  }

  // 页面加载初始化
  window.onload = initPage;
</script>

<!-- 彩纸效果库 -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>
</body>
</html>